<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: tianhao
 * @LastEditTime: 2022-01-10 16:39:36
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom1_container" id="container" style="height: 95%"></div>
</template>

<script>
import {DualAxes} from '@antv/g2plot';
export default {
  data (){
    return{
       dataArr:[ { year: '1951 年', sales: 38 },
  { year: '11.20', sales: 52,count:4 },
  { year: '11.25', sales: 61,count:5},
  { year: '11.30', sales: 145,count:5},
  { year: '12.5', sales: 48,count:4.9},
  { year: '12.10', sales: 38,count:3},
  { year: '12.15', sales: 38,count:35}
    ]
     }
  },
created(){
  
},
mounted(){
this.initChart()
},
methods:{
initChart(){
  const dualAxes = new DualAxes(this.$refs.bottom1_container,{
    data:[this.dataArr,this.dataArr],
    xField:'year',
    yField:['sales','count'],
    geometryOptions:[{
      geometry:'line',
      color:'#5B8FF9',
    },
    {
      geometry:'line',
      color:'#5AD8A6',
    }
    ]
  })

  dualAxes.render();
}
}
}
</script>

<style scoped>

</style>